@use "../../../theme/themeify.scss" as tools;

.yakit-round-corner-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    border-radius: 8px;

    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    white-space: nowrap;
}

$color-type: (
    blue: (
        color: var(--Colors-Use-Blue-Primary),
        alph: 10%
    ),
    green: (
        color: var(--Colors-Use-Green-Primary),
        alph: 10%
    )
);

@mixin generateColors() {
    @each $type, $value in $color-type {
        $color: map-get($value, "color");
        $bgColor: tools.fetch-color-transparen($color, map-get($value, "alph"));

        .yakit-round-corner-tag-#{$type} {
            color: $color;
            background-color: $bgColor;
            svg {
                color: $color;
            }
        }
    }
}
@include generateColors();

.yakit-round-corner-tag-primary {
    color: var(--Colors-Use-Neutral-Text-3-Secondary);
    background-color: var(--Colors-Use-Neutral-Bg-Hover);
    svg {
        color: var(--Colors-Use-Neutral-Text-3-Secondary);
    }
}

.yakit-round-corner-tag-info {
    color: var(--Colors-Use-Neutral-Text-3-Secondary);
    background-color: tools.fetch-color-transparen(var(--Colors-Use-Neutral-Text-3-Secondary), 10%);
    svg {
        color: var(--Colors-Use-Neutral-Text-3-Secondary);
    }
}
